﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery.bindTools.js" type="text/javascript"></script>

    <script src="../js/chili/jquery.chili-2.2.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery.json.min.js" type="text/javascript"></script>

    <script src="../js/chili/recipes.js" type="text/javascript"></script>

    <link href="../sample.css" rel="stylesheet" type="text/css" />
    <link href="../960.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">
        var data = [{
            name: "leo",
            age: 30,
            email: "lqz.leo@gmail.com"

        },
        {
            name: "cady",
            age: 32,
            email: "cadylu@125.com"

}];

            $(document).ready(function() {

                $("#content").bindTool({
                    template: $("#showTemplate"),
                    editTemplate: {//用于编辑信息模板的。切换的时候用到editTemplate这个名称
                        template: $("#template4edit"), //编辑时候使用的模板。                    
                        bind: function(jsonObject, area) {//json对象绑定到模板前发生。这时候模板还没有替换原来的模板。
                            $("#output").append("<br>" + "template4edit:bind" + "name:" + jsonObject.name);
                        },
                        bound: function(jsonObject, area) {//json对象绑定到模板后发生。这时候模板还没有替换原来的模板。
                            $("#output").append("<br>" + "template4edit:bound" + "name:" + jsonObject.name + "<br>");
                        }
                    },
                    show: function(area) { //这时候，模板已经替换了原来的模板，但是还没有显示出来。默认是$(area).show()                      
                        $(area).fadeIn(); //这里改为fadeIn.
                    }

                }).bindTool("bind", data);



                $(".save").live('click', function() {
                    $("#content").bindTool('switch', 'template', $(this).parent());
                });

                $(".edit").live('click', function() {
                    $("#content").bindTool("switch", 'editTemplate', $(this).parent());
                });

                //收集所有信息 
                $("#collectAll").click(function() {
                    var data = $("#content").bindTool('collect');
                    alert($.toJSON(data));
                });
                // 收集正在编辑的信息 
                $("#collectEdit").click(function() {
                    var data = $("#content").bindTool('collect', 'editTemplate');
                    alert($.toJSON(data));
                });
                // 收集显示的信息 
                $("#collectShow").click(function() {
                    var data = $("#content").bindTool('collect');
                    alert($.toJSON(data));
                });
            });
    </script>

</head>
<body>
    <div>
        <div class="source">
            多模板切换，过程如下：
            <ol>
                <li>制定两个模板，在这个示例中，第一个是 $("#showTemplate") 第二个是 template4edit</li>
                <li>在bindTools的Options指定 默认模板，36行代码。当使用bind命令的时候，就会默认使用这个$("#showTemplate")</li>
                <li>声明切换模板，可以给一个任意名字，如"editTemplate",它的属性可以有<br />
                    <ol>
                        <li>template 模板的对象（line-38）</li>
                        <li>bind和bound事件</li>
                        <li>show，用于显示动画，这个是可选的，默认是jquery的show方法</li>
                        <li>bindWay，如果为空，使用默认模板的bindway方法</li>
                    </ol>
                </li>
            </ol>
            <pre class="ln-35 code"><code class="js">$("#content").bindTool({ template: $("#showTemplate"),
                editTemplate: {//用于编辑信息模板的。切换的时候用到editTemplate这个名称 template: $("#template4edit"),
                //编辑时候使用的模板。 bind: function(jsonObject, area) {//json对象绑定到模板前发生。这时候模板还没有替换原来的模板。
                $("#output").append("<br>
                " + "template4edit:bind" + "name:" + jsonObject.name); }, bound: function(jsonObject,
                area) {//json对象绑定到模板后发生。这时候模板还没有替换原来的模板。 $("#output").append("<br>
                " + "template4edit:bound" + "name:" + jsonObject.name + "<br>
                "); } }, show: function(area) { //这时候，模板已经替换了原来的模板，但是还没有显示出来。默认是$(area).show() area.fadeIn();
                //这里改为fadeIn. } }).bindTool("bind", data); </code></pre>
        </div>
        以下是切换使用的代码：
        <div class="source">
            <pre class="ln-53 code"><code class="js">$(".edit").live('click', function() { //第一个参数是命令:switch
                //第二参数是切换的模板名称 //第三个是数据所在的jquery对象, //因为this现在指定是button，因此$(this).parent()就是数据所在的jquery对象了。
                $("#content").bindTool("switch", 'editTemplate', $(this).parent()); }); </code></pre>
        </div>
    </div>
    <!-- template  -->
    <div id="template4edit" style="display: none">
        <p>
            <label>
                Name:</label>
            <input name="name" type="text" title="" />
        </p>
        <p>
            <label>
                Age:</label>
            <input name="age" type="text" />岁
        </p>
        <p>
            <label>
                Email</label>
            <input name="email" type="text" />
        </p>
        <hr />
        <button class="save">
            保存</button>
        <hr />
    </div>
    <div id="showTemplate" style="display: none">
        <p>
            <label>
                Name:</label>
            <span name="name"></span>
        </p>
        <p>
            <label for="age">
                Age:</label>
            <span name="age"></span>岁
        </p>
        <p>
            <label for="email">
                Email</label>
            <span name="email"></span>
        </p>
        <hr />
        <button class="edit">
            编辑</button>
        <hr />
    </div>
    <!-- template -->
    <div class="demo" style="float: left; width: 350px">
        <div id="content">
        </div>
        <button id="collectAll" type="button">
            收集所有信息
        </button>
        <button id="collectEdit" type="button">
            收集正在编辑的信息
        </button>
        <button id="collectShow" type="button">
            收集显示的信息
        </button>
    </div>
    <div id="output" style="float: left; width: 300px; border: solid 1px #000">
    </div>
</body>
</html>
